import React, { useState } from 'react'
import { Alert, Checkbox, message } from 'antd'
import { Link, history, useModel } from 'umi'
import styles from './index.less'
import LoginFrom from './components'
import { HttpLogin, ILogin } from '@/services'
import { getMachineId, setStore, StoreKey } from '@/utils/util'
import {config} from '@/config'

const { Tab, Username, Password, Mobile, Captcha, Submit } = LoginFrom
const LoginMessage: React.FC<{
    content: string
}> = ({ content }) => (
    <Alert
        style={{
            marginBottom: 24,
        }}
        message={content}
        type='error'
        showIcon
    />
)

const Login: React.FC<{}> = () => {
    const [submitting, setSubmitting] = useState(false)
    const { refresh } = useModel('@@initialState')
    const handleSubmit = async (values: ILogin) => {
        setSubmitting(true)
        try {
            // 登录
            const msg = await HttpLogin({
                ...values,
                devid: await getMachineId(),
                devName: window.navigator.userAgent,
            })
            if (msg.flag === 1) {
                message.success('登录成功！')
                await setStore(StoreKey.TOKEN, msg.data.token)
                await refresh()
                const redirect = history.location.query?.redirect as string
                history.push(redirect || '/')
                return
            }
        } catch (error) {
            message.error('登录失败，请重试！')
            console.error(error)
        }
        setSubmitting(false)
    }
    return (
        <div className={styles.container}>
            <div className={styles.content}>
                <div className={styles.top}>
                    <div className={styles.header}>
                        <Link to='/'>
                            <img alt='logo' className={styles.logo} src='./logo.png' />
                            <span className={styles.title}>{config.title}</span>
                        </Link>
                    </div>
                    <div className={styles.desc}>{config.company}</div>
                </div>
                <div className={styles.main}>
                    <LoginFrom onSubmit={handleSubmit}>
                        <Mobile
                            name='phone'
                            placeholder='手机号'
                            rules={[
                                { required: true, message: '请输入手机号！' },
                                { pattern: /^1\d{10}$/, message: '手机号格式错误！' },
                            ]}
                        />
                        <Captcha
                            name='smsCode'
                            placeholder='验证码'
                            countDown={120}
                            getCaptchaButtonText=''
                            getCaptchaSecondText='秒'
                            rules={[{ required: true, message: '请输入验证码！' }]}
                        />
                        <Submit loading={submitting}>登录</Submit>
                    </LoginFrom>
                </div>
            </div>
        </div>
    )
}

export default Login
